@charset "UTF-8";
@import 'reset';
@import 'common';
.web {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    header {
        width: vw(706px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center; 
        padding:vw(16px) 0 vw(10px);
        .logo_box {
            width: vw(124px);
            height:  vw(124px);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .search_box {
//          position:relative;
            width:vw(270px) ;
            height:vw(55px);
            box-sizing: border-box;
            border:vw(3px) solid $index-color;
            border-radius: vw(27px);
//          overflow: hidden;
            form {
                width:100%;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                align-items:center;
                padding:0 vw(20px) 0 vw(30px);
                input {
                    width: vw(180px);
                    border: 0;
                    height: vw(46px);
                    font-size: vw(24px);
                    outline: none;
                }
                button {
                    background: #FFFFFF;
                    border:0;
                    width: vw(38px);
                    height: vw(38px);
                    font-size: vw(36px);
                    color: $index-color;
                    outline: none;
                }
                
            
            }
            
        }
        .city_box {
            width: vw(166px);
            height:vw(55px) ;
            line-height:vw(50px) ;
            border: vw(3px) solid $index-color;
            box-sizing: border-box;
            padding-left:vw(14px);
            position:relative;
            select {
                width:90%;
                height: 80%;
                border:0;
                outline: none;
                -webkit-appearance: none;
                font-size: vw(26px);
            }
            &::after {
                content: "";
                border-left:vw(10px)solid transparent ;
                border-right:vw(10px) solid transparent ;
                border-top:vw(10px) solid $index-color ;
                border-bottom:vw(10px) solid transparent ;
                position: absolute;
                top: 50%;
                right: vw(20px);
                transform: translateY(-25%);
            }
            }
            
    }
    section{
        position: absolute;
        left: 0;
        width: 100%;
        top: vw(150px);
        bottom: vw(135px);
        overflow-y: auto;
    }
    .kv {
        width: 100%;
        img {
            width: 100%;
        }
    }
    .youhui {
        width: 90%;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        .youhui_left {
            justify-content: flex-start;
            i {
                color: $index_color;
                font-size: vw(48px);
            }
            span {
                font-size: vw(38px);
            }
        }
        .youhui_right {
            justify-content: flex-end;
            i {
                color: $index_color;
                font-size: vw(38px);
            }
            p {
                font-size: vw(38px);
            }
        }
    }
    .youhui_box {
        width: 80%;
        height: vw(260px);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        .box {
            width: vw(237px);
            height: vw(93px);
            img {
                width: 100%;
            }
        }
    }
    .youhui_bottom {
        width: 90%;
        display: flex;
        margin: 0 auto;
          padding: vw(20px) 0;
        justify-content: space-between;
        .youhui_left {
            justify-content: flex-start;
            i {
                color: $index_color;
                font-size: vw(38px);
            }
            span {
                font-size: vw(38px);
            }
        }
        .youhui_right {
            justify-content: flex-end;
            i {
                color: $index_color;
                font-size: vw(38px);
            }
            p {
                font-size: vw(38px);
            }
        }
    }
    .like {
        width: vw(729px);
        height: vw(166px);
        margin: 0 auto;
        display: flex;
        padding: vw(20px) 0;
        .like_left {
            width: vw(210px);
            img {
                width: 100%;
            }
        }
        .like_right {
            width: vw(500px);
            line-height: vw(55px);
            h4 {
                font-size: vw(30px);
            }
            a {
                color: #C5C5C5;
                font-size: vw(22px);
            }
            p {
                font-size: vw(30px);
                color: $index_color;
            }
            span {
                color: #c5c5c5;
                font-size: vw(22px);
            }
        }
    }
}